<template>
  <div id="home">
    <nav-bar class="home-nav">
      <div slot="center">购物街</div>
    </nav-bar>
    <swiper :banners="banners"></swiper>
    <recommend-view :recommends="recommends"></recommend-view>
    <feature-view></feature-view>
    <tab-control class="tab-control" :titles="['流行','新款','精选']" @tabClick='tabClick'></tab-control>
    <goods-list :goods="goods[currentType].list"></goods-list>
  </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar'
import Swiper from 'components/common/swiper/Swiper'
import RecommendView from './childComps/RecommendView'
import FeatureView from './childComps/FeatureView.vue'
import TabControl from 'components/content/tabControl/TabControl'
import GoodsList from 'components/content/goods/GoodsList'
import {getHomeMultidata, getHomeGoods} from 'network/home';



export default {
  components: { 
    NavBar,
    Swiper,
    RecommendView,
    FeatureView,
    TabControl,
    GoodsList
  },
  name: 'Home',
  data() {
    return {
      banners: [],
      recommends: [],
      goods: {
        "pop":{page: 0,list: []},
        "new":{page: 0,list: []},
        "sell":{page: 0,list: []}, 
      },
      currentType: 'pop'
    }
  },
  created() {
    // 1.请求多个数据
    this.getHomeMultidata()
    // 2.请求商品数据 cat_id 996 995 71
    this.getHomeGoods('pop')
    this.getHomeGoods('new')
    this.getHomeGoods('sell')
  },
  methods: {
    getHomeMultidata() {
      getHomeMultidata().then(res => {
        this.banners = res.data.banner.list
        this.recommends = res.data.recommend.list
      })
    },
    getHomeGoods(type) {
      let index = 0;
      if(type == 'pop'){
        index = 9
      } else if (type == 'new') {
        index = 20
      } else if (type == 'sell') {
        index = 22
      }
      getHomeGoods(index,this.goods[type].page+=1).then(res => {
        console.log('res',res);
        this.goods[type].list.push(...res.message.goods)
        console.log('this.goods[type]:',this.goods[type].list);
      })
    },
      tabClick(index){
          switch(index){
            case 0:
              this.currentType = 'pop'
              break
            case 1:
              this.currentType = 'new'
              break
            case 2:
              this.currentType = 'sell'
              break
          }
      }
  }
}
</script>

<style scoped>
#home {
  padding-top: 44px;
}
  .home-nav {
    background-color: var(--color-tint);
    color: #fff;
    position: fixed;
    z-index: 9;
    top: 0;
    left: 0;
    right: 0;
  }

  .tab-control {
    position: sticky;
    top: 44px;
    z-index: 9;
  }
</style>
